<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<style>
  .wrap{
    width: 500px;
    margin: 50px auto;
  }
</style>
<body>
<div id="app">
  <div class="wrap">
    <div class="row">
      <div class="col-md-10 col-sm-10">
        <input type="text" class="form-control" v-model="inputex">
      </div>
      <button @click="addse" class="btn btn-success">增加</button>
    </div>
    <ul class="list-group" style="margin-top: 20px;">
      <li v-if="todos.length===0" class="list-group-item" style="text-align: center;color: #999;">暂无代办事项</li>
      <li 
        v-for="(item,index) in todos" 
        class="list-group-item">{{item.add}}
        <button @click="addevt(index)" class="btn-danger btn btn-xs" style="float: right;">删除</button>
        <button :disabled="item.adds" @click="succ(index)"  class="btn-success btn btn-xs" style="float: right; margin-right: 10px;">{{item.adds?'已完成':'点击完成'}}</button>
      </li>
    </ul>
  </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
const vm = new Vue ( {
  el: '#app',
  data: {
    inputex: '',
    todos:[
      {
        add: '爬山',
        adds: false
      },
      {
        add: '上树',
        adds: true
      },
      {
        add: '下山',
        adds: false
      },
      {
        add: '登山',
        adds: false
      },
    ]
  },
  methods: {
    addevt(index){
      if(confirm('你确定要删除吗？')){
        this.todos.splice(index,1)
      }
    },
    succ(index){
      this.todos[index].adds=true
    },
    addse(){
      if(this.inputex.trim()===''){
        return
      }
      this.todos.push({
        add: this.inputex,
        adds: false
      })
      this.inputex=''
    }
  }
} )
</script>
</html>